import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Card } from 'antd';
import React, { useRef } from 'react';

import * as utils from '@/utils/utils';

import * as api from '@/services/trade';

export type TradeTableProps = {
  orderId: string;
};

const TradeTable: React.FC<TradeTableProps> = (props) => {
  const { orderId } = props;

  const actionRef = useRef<ActionType>();

  let columns: ProColumns<API.Trade>[] = [
    {
      title: '类型',
      align: 'center',
      width: 80,
      dataIndex: 'tradeType',
      sorter: true,
      renderText: (val: string) => {
        return val.toUpperCase();
      },
    },
    {
      title: '渠道',
      dataIndex: 'channel',
      align: 'center',
      search: false,
      sorter: true,
    },
    {
      title: '渠道商品',
      dataIndex: 'channelItemId',
      align: 'center',
      search: false,
      sorter: true,
    },
    {
      title: '渠道订单号',
      dataIndex: 'channelTradeNo',
      align: 'center',
      sorter: true,
    },

    {
      title: '授权时间',
      dataIndex: 'channelExpireTime',
      align: 'center',
      search: false,
      sorter: true,
      renderText: (_, record) => {
        if (record.channelExpireTime) {
          return utils.formatUtcToLocal(record.channelExpireTime);
        }
        return null;
      },
    },
    {
      title: '退款原因(时间)',
      dataIndex: 'revocationDate',
      align: 'center',
      search: false,
      sorter: true,
      renderText: (_, record) => {
        let log = '';
        if (record.revocationReason != null && record.revocationReason != '') {
          log += record.revocationReason;
        }
        if (record.revocationDate) {
          log += ` (${utils.formatUtcToLocal(record.revocationDate)})`;
        }

        return log;
      },
    },
    {
      title: '状态',
      align: 'center',
      width: 80,
      dataIndex: 'tradeStatus',
      search: false,
      sorter: true,
      // renderText: (val) => {
      //   console.log(val);
      //   return c.getOrderStatusText(val);
      // },
    },
    {
      title: '操作时间',
      align: 'center',
      width: 180,
      dataIndex: 'tradeTime',
      search: false,
      sorter: true,
      renderText: (_, record) => {
        return utils.formatUtcToLocal(record.tradeTime);
      },
    },
    {
      title: '系统',
      align: 'center',
      width: 120,
      dataIndex: 'enter',
      sorter: true,
    },
    {
      title: '处理人',
      width: 260,
      dataIndex: 'handlerUsername',
      sorter: true,
      renderText: (_, record) => {
        let text = '';
        if (record.handlerName) {
          text = `${record.handlerName}`;
        }
        if (record.handlerUsername) {
          text += `(${record.handlerUsername})`;
        }
        return text;
      },
    },
  ];

  return (
    <Card style={{ marginTop: 20, minHeight: 200 }} title="交易记录">
      <ProTable
        rowKey="id"
        options={{
          fullScreen: false,
          reload: true,
          setting: false,
          density: false,
        }}
        columnEmptyText={''}
        actionRef={actionRef}
        columns={columns}
        search={false}
        toolBarRender={false}
        pagination={{
          defaultPageSize: 15,
          pageSizeOptions: ['15', '30', '60', '100'],
          hideOnSinglePage: true,
        }}
        params={{ orderId }}
        request={api.list}
      />
    </Card>
  );
};

export default TradeTable;
